import React, { Component } from 'react'
import './home.scss'
import axios from 'axios'
import { Link } from 'react-router-dom';

class Home extends Component {
  state = {
    data: [{
      title: '1媒体称英国官方承认有意让大多数人感染新冠肺炎，以获得群体免疫，是真的吗？结果会如何？结果会如何？结果会如何？结果会如何？结果会如何？结果会如何？',
      desc: '司马懿： 这个问题下的回答基本堪称大型魔幻节奏现场。 我后来还怕自己听漏了，专门从头到尾又看了一遍Boris的发言，请问Boris到底那句话说的「有意让…'
    }, {
      title: '2媒体称英国官方承认有意让大多数人感染新冠肺炎，以获得群体免疫，是真的吗？结果会如何？结果会如何？结果会如何？结果会如何？结果会如何？结果会如何？',
      desc: '司马懿： 这个问题下的回答基本堪称大型魔幻节奏现场。 我后来还怕自己听漏了，专门从头到尾又看了一遍Boris的发言，请问Boris到底那句话说的「有意让…'
    }, {
      title: '3媒体称英国官方承认有意让大多数人感染新冠肺炎，以获得群体免疫，是真的吗？结果会如何？结果会如何？结果会如何？结果会如何？结果会如何？结果会如何？',
      desc: '司马懿： 这个问题下的回答基本堪称大型魔幻节奏现场。 我后来还怕自己听漏了，专门从头到尾又看了一遍Boris的发言，请问Boris到底那句话说的「有意让…'
    }, {
      title: '4媒体称英国官方承认有意让大多数人感染新冠肺炎，以获得群体免疫，是真的吗？结果会如何？结果会如何？结果会如何？结果会如何？结果会如何？结果会如何？',
      desc: '司马懿： 这个问题下的回答基本堪称大型魔幻节奏现场。 我后来还怕自己听漏了，专门从头到尾又看了一遍Boris的发言，请问Boris到底那句话说的「有意让…'
    }, {
      title: '5媒体称英国官方承认有意让大多数人感染新冠肺炎，以获得群体免疫，是真的吗？结果会如何？结果会如何？结果会如何？结果会如何？结果会如何？结果会如何？',
      desc: '司马懿： 这个问题下的回答基本堪称大型魔幻节奏现场。 我后来还怕自己听漏了，专门从头到尾又看了一遍Boris的发言，请问Boris到底那句话说的「有意让…'
    }, {
      title: '6媒体称英国官方承认有意让大多数人感染新冠肺炎，以获得群体免疫，是真的吗？结果会如何？结果会如何？结果会如何？结果会如何？结果会如何？结果会如何？',
      desc: '司马懿： 这个问题下的回答基本堪称大型魔幻节奏现场。 我后来还怕自己听漏了，专门从头到尾又看了一遍Boris的发言，请问Boris到底那句话说的「有意让…'
    }, {
      title: '7媒体称英国官方承认有意让大多数人感染新冠肺炎，以获得群体免疫，是真的吗？结果会如何？结果会如何？结果会如何？结果会如何？结果会如何？结果会如何？',
      desc: '司马懿： 这个问题下的回答基本堪称大型魔幻节奏现场。 我后来还怕自己听漏了，专门从头到尾又看了一遍Boris的发言，请问Boris到底那句话说的「有意让…'
    }],
    list: [],
    classify: [],
    value: 1234444,
    value1: '4月1日提交代码',
  };

  componentDidMount() {
    axios.post('https://api.wxhnote.com/classify_list', {
      page: 1,
      pageshow: 5
    }).then(res => {
      this.setState({
        classify: res.data.data.list
      })
    })


    axios.post('https://api.wxhnote.com/news_list', {
      page: 1,
      pageshow: 10
    }).then(res => {
      
      this.setState({
        list: res.data.data.list
      })
    })
  }
  render () {
    return (
      <div className="home-wrap">
        <div className="article-list">
          {
            this.state.list.map((item, index) => {
              return (
                <Link to={`/article/${item.news_id}`} key={index}>
                  <div className="al-item">
                    <div className="ai-title">{item.news_title}</div>
                    <div className="ai-desc">{item.introduce}</div>
                  </div>
                </Link>
              )
            })
          }
        </div>
        <div className="classify">
          <div className="c-title">分类</div>
          <div className="c-list">
            <ul>
              {
                this.state.classify.map((item, index) => {
                  return (
                  <li key={item.cy_id}><span className="cl-item">{item.cy_name}({item.cy_num})</span></li>
                  )
                })
              }
            </ul>
          </div>
        </div>
      </div>
    )
  }
}

export default Home